<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,minimum-scale=1.0, maximum-scale=1.0" />
    <title>vw适配响应式</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <svg class="ping-pong" viewBox="0 0 128 128" width="128px" height="128px">
      <defs>
        <linearGradient id="ping-pong-grad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#000" />
          <stop offset="100%" stop-color="#fff" />
        </linearGradient>
        <mask id="ping-pong-mask">
          <rect x="0" y="0" width="128" height="128" fill="url(#ping-pong-grad)" />
        </mask>
      </defs>
      <g fill="var(--primary)">
        <g class="ping-pong__ball-x">
          <circle class="ping-pong__ball-y" r="10" />
        </g>
        <g class="ping-pong__paddle-x">
          <rect class="ping-pong__paddle-y" x="-30" y="-2" rx="1" ry="1" width="60" height="4" />
        </g>
      </g>
      <g fill="hsl(163,90%,40%)" mask="url(#ping-pong-mask)">
        <g class="ping-pong__ball-x">
          <circle class="ping-pong__ball-y" r="10" />
        </g>
        <g class="ping-pong__paddle-x">
          <rect class="ping-pong__paddle-y" x="-30" y="-2" rx="1" ry="1" width="60" height="4" />
        </g>
      </g>
    </svg>
  </body>
</html>
